<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">

        <el-row>
          <el-col :span="6">
            <el-form-item label="规则名称：" prop="ruleName">
              <el-input v-model="search.ruleName" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item style="margin-top: -2px">
              <el-button type="primary" @click="searchQuery">查询</el-button>
              <el-button type="info" @click="search = {};searchQuery()">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>

    <qm-table
      ref="qmTable"
      menuType="text"
      keyProp="ruleId"
      formRefs="ruleForm"
      :data="query"
      :formOptions="{ labelWidth: '120px' }"
      :showCheckbox="false"
      :showView="false"
      :isCustomForm="true"
      :modalOptions="{ height: 630 }"
      :textMap="{ add: '创建考勤规则' }"
    >
      <qm-table-column field="ruleName">名称</qm-table-column>
      <qm-table-column field="workHours">工时</qm-table-column>
      <qm-table-column field="ondutyTime">上班时间</qm-table-column>
      <qm-table-column field="offdutyTime">下班时间</qm-table-column>
      <qm-table-column field="isOutwork" fieldtype="enabledisable">外勤打卡</qm-table-column>
      <qm-table-column field="isCheckAddress" fieldtype="enabledisable">校验地址</qm-table-column>
      <qm-table-column field="isCheckWifi" fieldtype="enabledisable">校验Wifi</qm-table-column>
      <qm-table-column field="isPhoto" fieldtype="enabledisable">校验图片</qm-table-column>
      <qm-table-column field="isEnabled" fieldtype="enabledisable">是否启用</qm-table-column>

      <template v-slot:form="{ model, controlData, models }">
        <el-tabs style="height: 700px;">
          <el-tab-pane label="考勤规则">
            <el-form
              class="qm-table-form"
              ref="ruleForm"
              label-width="120px"
              :model="model"
              :rules="rules.ruleForm"
            >

              <el-row>
                <el-col :span="12">
                  <el-form-item label="规则名称：" prop="ruleName">
                    <el-input v-model="model.ruleName" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="Wifi名称：" prop="wifiSsid">
                    <el-input v-model="model.wifiSsid" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="上班时间：" prop="ondutyTime">
                    <el-time-picker v-model="model.ondutyTime" value-format="HH:mm:ss" placeholder="请选择">
                    </el-time-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="下班时间：" prop="offdutyTime">
                    <el-time-picker v-model="model.offdutyTime" value-format="HH:mm:ss" placeholder="请选择">
                    </el-time-picker>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="地址：" prop="address">
                    <el-input v-model="model.address" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="经纬度：" prop="addressPoint">
                    <el-input v-model="model.addressPoint" placeholder="请输入内容"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="休息时：" prop="restHours">
                    <el-slider
                      v-model="model.restHours"
                      :max="24"
                      :step="0.5"
                    ></el-slider>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工时：" prop="workHours">
                    <el-slider
                      v-model="model.workHours"
                      :max="24"
                      :step="0.5"
                    ></el-slider>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="校验Wifi：" prop="isCheckWifi">
                    <el-switch v-model="model.isCheckWifi"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="校验图片：" prop="isPhoto">
                    <el-switch v-model="model.isPhoto"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="校验地址：" prop="isCheckAddress">
                    <el-switch v-model="model.isCheckAddress"></el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="开启外勤打卡：" prop="isOutwork">
                    <el-switch v-model="model.isOutwork"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="启用规则：" prop="isEnabled">
                    <el-switch v-model="model.isEnabled"></el-switch>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="特殊日期">

          </el-tab-pane>
        </el-tabs>
      </template>
    </qm-table>
  </div>
</template>

<script>
  import Controller from "@/libs/framework/controller";

  export default class Instance extends Controller {
    onBeforeInit() {
      this.urls = {
        query: [{url: "/eip/sign/rule/query", method: "post"}],
        save: "/eip/sign/rule/save",
        delete: "/eip/sign/rule/delete",
        entity: "/eip/sign/rule/getEntity",
        model: "/eip/sign/rule/getListModel",
      };
    }

    mixin() {
      return {
        data() {
          return {
            row: {},
            rules: {
              ruleForm: {
                ruleName: [{required: true, message: "请输入规则名称", trigger: "blur"}],
                ondutyTime: [{required: true, message: "请选择上班时间", trigger: "blur"}],
                offdutyTime: [{required: true, message: "请选择下班时间", trigger: "blur"}],
                restHours: [{required: true, message: "请选择输入休息时", trigger: "blur"}],
                workHours: [{required: true, message: "请选择输入工时", trigger: "blur"}],
              },
            }
          }
        },
        methods: {
        }
      }
    }
  }
</script>

<style scoped>

</style>
